<template>
  <panel title="门禁设备运行监控" class="door-control-rool">
    <div class="door-control-content">
      <div class="door" v-for="data in datas">
        <div class="icon"></div>
        <div class="position-state-box">
          <div class="position-name">{{data.name}}</div>
          <div class="position-state" :class="{danger: data.type!==1}">
            <span>{{data.type === 1 ? '正常': '异常'}}</span>
          </div>
        </div>
      </div>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'MaintenanceOrder',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null,
      datas: [
        {
          name: '北一区',
          type: 1
        },
        {
          name: '北二区',
          type: 1
        },
        {
          name: '南一区',
          type: 1
        },
        {
          name: '南二区',
          type: 1
        }
      ]
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.chartOptions = {
        series: [{
          data: [
            {value: 335, name: '已用车位'},
            {value: 310, name: '预留车位'},
            {value: 234, name: '剩余车位'},
            {value: 135, name: '临时车位'}
          ]
        }]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

  .danger
    color red

  .door-control-rool
    width 100%
    height 100%
    position relative
    .door-control-content
      margin-left 10px
      margin-top 15px
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 80%
      height 70%

      .door
        display inline-block
        position relative
        width 44.9%
        height 50%
        margin-right 5%
        margin-top 1%

    .door
      .position-state-box
        position absolute
        top 50%
        left 0px
        transform translate(0, -50%)
        width 100%
        height 60px
        line-height 25px
        padding-left 60px
        box-sizing border-box

        .position-state
          color #3EC053
      .icon
        position absolute
        top 50%
        left 0px
        transform translate(0, -50%)
        width 60px
        height 60px
        background no-repeat url('../../../../assets/images/door.png') left center / 50px auto
</style>
